<template>
  <div class="inout-charts">
    <el-row class="header">
      <el-col :span="6">
        <p class="subject">出库/入库信息</p>
      </el-col>
      <el-col :span="18" class="bar">
        <el-radio-group v-model="radio1">
          <el-radio-button label="w">本周</el-radio-button>
          <el-radio-button label="e">本月</el-radio-button>
          <el-radio-button label="c">本年</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <div id="echart_bar" />
  </div>
</template>

<script>
import { getSumList } from '@/api'
export default {
  data() {
    return {
      radio1: 'w',
      sumList: [],
      dates: []
    }
  },
  watch: {
    radio1: {
      deep: true,
      handler: async function() {
        // 检测是否已经存在echarts实例，如果存在，先销毁
      // 判断是否有数据
        await this.fetchData()
        this.chartBox = this.$echarts.getInstanceByDom(document.getElementById('echart_bar'))
        if (this.chartBox !== undefined) {
          this.chartBox.dispose()
        }
        this.getBar()
      }
    }
  },
  async created() {
    await this.fetchData()
    this.$nextTick(() => {
      this.getBar()
    })
  },
  methods: {
    async fetchData() {
      const { data } = await getSumList({ dimension: this.radio1 })
      this.sumList = [...data.data]
      this.dates = data.x
    },
    getBar() {
      this.chartBox = this.$echarts.init(document.getElementById('echart_bar'))
      const option = {
        tooltip: {
          // alwaysShowContent: true,
          // 显示阴影
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '2%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        // 设置颜色
        color: ['#ff7100', '#ffb200'],
        legend: {
          left: '45%',
          top: '95%',
          data: ['入库', '出库']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: this.dates
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: '0%',
            itemStyle: {
              borderRadius: [6, 6, 0, 0] // 依次表示 左上，右上，右下、左下
            },
            data: Array.from(this.sumList[0].data)
          },
          {
            name: '出库',
            type: 'bar',
            itemStyle: {
              borderRadius: [6, 6, 0, 0] // 依次表示 左上，右上，右下、左下
            },
            data: Array.from(this.sumList[1].data)
          }
        ]
      }
      this.chartBox.setOption(option)
      // 根据页面大小自动响应图表大小
      window.addEventListener('resize', () => {
        this.chartBox.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.el-radio-group {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}
.el-col-18 {
  text-align: right;
}
</style>

<style lang="scss" scoped>
.inout-charts {
  margin-top: 19px;
  height: 500px;
  background: #fff;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  border-radius: 12px;
  padding: 25px;
  .subject {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
  }
  #echart_bar {
    width: 100%;
    height: 90%;
  }
}
</style>
